; (function () {

  $.fn.vueCookbook = function () {
    this.html(`
      <div class="cookbook-container">
        <div class="cookbook-col">
          <div class="cookbook-row cookbook-header">
            <span>日期</span>
            <span>餐次<span>(餐标)</span></span>
          </div>
          <div class="cookbook-row" v-for="(item, index) of eachMeal" :key="item.guid">
            <div>
              <span>{{ item.eachMealName }}</span>
            </div>
            <div v-for="it of item.mealPrices" :key="it.guid">
              <input type="text" class="yb-input" v-model="it.price">
              <span>元</span>
            </div>
            <span class="cookbook-del-row iconfont icon-shanchu" style="color: #ff0000" @click="delRow(index)"></span>
          </div>
          <div class="cookbook-row new-row" v-if="disabled">
            <button key="button" class="yb-button" v-if="!addEachMealFLag" @click="changeAddFlag(true)" type="plain"><span class="iconfont icon-jiahao"></span>添加餐次</button>   
            <input v-model.trim="mealName" ref="input" type="text" key="input" v-else class="yb-input" style="width: 100%" placeholder="餐次名称" @blur="changeAddFlag(false)">
          </div>
        </div>
        <div class="cookbook-col-day-wrapper">
          <div class="cookbook-col cookbook-col-day" v-for="item of mealData" :key="item.dateDay">
            <div class="cookbook-row cookbook-data">
              <div class="icon-wrapper">
                <span class="cookbook-stop iconfont icon-tingzhi" v-if="item.status == 'TRUE'" @click="changeDayStatus(item, 'FALSE')"></span>
                <span class="cookbook-recover iconfont icon-huifu" v-else @click="changeDayStatus(item, 'TRUE')"></span>
              </div>
              <div class="dateDay">{{ item.dateDay }}</div>
              <div class="week">({{ item.week }})</div>
              <span class="cookbook-rest" v-if="item.status == 'FALSE'">休</span>
            </div>
            <div class="cookbook-row cookbook-data" v-for="it of item.eachMeals" :key="it.canciGuid">
              <div class="icon-wrapper">
                <span @click="delPdt(it)" class="cookbook-del iconfont icon-shanchu" style="color: #ff0000" v-if="it.pdtList.length"></span>
                <span @click="stopMeal(item, it)" class="cookbook-stop iconfont icon-tingzhi" v-if="it.status == 'TRUE' "></span>
                <span @click="recoverMeal(item, it)" class="cookbook-recover iconfont icon-huifu" v-else></span>
              </div>
              <template v-if="it.status == 'TRUE'">
                <div class="cookbook-add" v-if="!it.pdtList.length&& !it._addFlag" @click="changeAddPdtFlag(it, true)">
                  <span class="iconfont icon-jiahao"></span>
                  <span>添加菜品</span>
                </div>
                <div class="select-wrapper" v-if="it._addFlag">
                  <vue-select ref="select" @blur="$set(it, '_addFlag', false)" filterable remote :remote-method="remoteMethod" />
                </div>
                <div class="cookbook-pdt" v-for="pdt of it.pdtList" :key="pdt.guid" :title="pdt.pdtName">{{ pdt.pdtName }}</div>
              </template>
              <span class="cookbook-rest" v-if="it.status == 'FALSE'" style="position: unset">休</span>
            </div>
            <div class="cookbook-row" v-if="disabled"></div>
          </div>
        </div>
      </div>
    `)
    new Vue({
      el: this[0],
      data() {
        return {
          disabled: false,
          eachMeal: [{
            guid: '1',
            eachMealName: '餐次名称1',
            mealPrices: [{
              guid: '1',
              price: ''
            }]
          }, {
            guid: '2',
            eachMealName: '餐次名称2',
            mealPrices: [{
              guid: '2',
              price: ''
            }]
          }],
          mealData: [{
            dateDay: '2022-05-05',
            week: '星期四',
            status: 'TRUE',
            eachMeals: [{
              canciGuid: '1',
              status: 'TRUE',
              pdtList: [{
                guid: '1',
                pdtName: '某某某菜品某某某菜品某某某菜品'
              }]
            }, {
              guid: '2',
              status: 'TRUE',
              pdtList: []
            }]
          }],
          addEachMealFLag: false,
          mealName: ''
        }
      },
      methods: {
        // 删除菜品
        delPdt(item) {
          item.pdtList = [];
        },
        // 停餐
        stopMeal(item, it) {
          it.status = 'FALSE';
          this.delPdt(it);
          item.status = item.eachMeals.findIndex(item => item.status == 'TRUE') == -1 ? 'FALSE' : 'TRUE';
        },
        // 启餐
        recoverMeal(item, it) {
          it.status = 'TRUE';
          item.status = 'TRUE';
        },
        changeDayStatus(item, flag) {
          item.eachMeals.forEach(it => {
            if (flag == 'TRUE') {
              this.recoverMeal(item, it);
            } else {
              this.stopMeal(item, it);
            }
          });
        },
        changeAddFlag(flag) {
          this.addEachMealFLag = flag;
          if (flag) {
            this.$nextTick(() => this.$refs.input.focus());
          } else if (this.mealName) {
            this.eachMeal.push({
              guid: guid(),
              eachMealName: this.mealName,
              mealPrices: [{
                guid: guid(),
                price: ''
              }]
            });
            this.mealData.forEach(item => {
              item.eachMeals.push({
                guid: guid(),
                status: 'TRUE',
                pdtList: []
              })
            })
            this.mealName = '';
          }
        },
        // 点击添加菜品
        changeAddPdtFlag(item, flag) {
          this.$set(item, '_addFlag', flag);
          this.$nextTick(() => {
            this.$refs.select[0].click();
          })
        },
        // 删除行
        delRow(index) {
          this.eachMeal.splice(index, 1);
          this.mealData.forEach(item => item.eachMeals.splice(index, 1));
        },
        remoteMethod(keywords) {
          console.log(keywords);
        }
      }
    })
  }

  /**
   * 生成guid
   * @param len
   * @param firstU
   * @param radix
   * @returns {string}
   */
  function guid(len = 32, firstU = true, radix = null) {
    let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
    let uuid = [];
    radix = radix || chars.length;

    if (len) {
      // 如果指定uuid长度,只是取随机的字符,0|x为位运算,能去掉x的小数位,返回整数位
      for (let i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
    } else {
      let r;
      // rfc4122标准要求返回的uuid中,某些位为固定的字符
      uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
      uuid[14] = '4';

      for (let i = 0; i < 36; i++) {
        if (!uuid[i]) {
          r = 0 | Math.random() * 16;
          uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
        }
      }
    }
    // 移除第一个字符,并用u替代,因为第一个字符为数值时,该guid不能用作id或者class
    if (firstU) {
      uuid.shift();
      return 'u' + uuid.join('');
    } else {
      return uuid.join('');
    }
  }

})();